<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic TexAlCenter">DataTable</h1>
                                <h:form id="form">
                                    <p:dataTable id="singleDT"
                                                 var="car"
                                                 value="#{dtSelectionView.cars1}"
                                                 rows="10"
                                                 paginator="true"
                                                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                                 rowsPerPageTemplate="5,10,15"
                                                 selectionMode="single"
                                                 selection="#{dtSelectionView.selectedCar}"
                                                 rowKey="#{car.id}">

                                        <p:ajax event="rowSelect" update=":form:carDetail" oncomplete="PF('carDialog').show()"/>

                                        <f:facet name="header">
                                            Car Sales Ranks
                                        </f:facet>
                                        <p:column headerText="Id" footerText="Id" sortBy="#{car.id}">
                                            <h:outputText value="#{car.id}" />
                                        </p:column>
                                        <p:column headerText="Year" footerText="Year" sortBy="#{car.year}">
                                            <h:outputText value="#{car.year}" />
                                        </p:column>
                                        <p:column headerText="Brand" footerText="Brand" sortBy="#{car.brand}">
                                            <h:outputText value="#{car.brand}" />
                                        </p:column>
                                        <p:column headerText="Color" footerText="Color" sortBy="#{car.color}">
                                            <h:outputText value="#{car.color}" />
                                        </p:column>
                                    </p:dataTable>

                                    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                                        <p:outputPanel id="carDetail" style="text-align:center;">
                                            <h:panelGrid columns="2" rendered="#{not empty dtSelectionView.selectedCar}">
                                                <f:facet name="header">
                                                    <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
                                                </f:facet>

                                                <h:outputText value="Id:" style="font-weight: bold"/>
                                                <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                                                <h:outputText value="Year" style="font-weight: bold"/>
                                                <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                                                <h:outputText value="Color:" style="font-weight: bold"/>
                                                <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

                                                <h:outputText value="Price" style="font-weight: bold"/>
                                                <h:outputText value="$#{dtSelectionView.selectedCar.price}" />
                                            </h:panelGrid>
                                        </p:outputPanel>
                                    </p:dialog>
                                </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>